<template>
	<view>
		<!--选择地址-->
		<view class="address" @click="chooseAddress">
			<view class="address1">
				<text class="icon">&#xe8ae;</text>
			</view>
			<view class="address2">
				<text>选择地址</text>
			</view>
			<view class="address3">
				<text class="icon">&#xe65b;</text>
			</view>
		</view>
		<!--收货地址详情-->
		<view class="addressDetail"> 
			<view class="name">
				<text class="icon">&#xe773; 姓名: {{userAddress.name}}</text>
			</view>
			<view class="tel">
				<text class="icon">&#xe773; 电话: {{userAddress.tel}}</text>
			</view>
			<view class="address">
				<text class="icon">&#xe773; 地址: {{userAddress.address}}</text>
			</view>
		</view>
		
		<!--商品-->
		<view class="product">
			<view class="left">
				<view>
					<image :src="img"></image>
				</view>
			</view>
			<view class="right">
				<view class="proname">
					<text>{{food.foodName}}</text>
				</view>
				<view class="proprice">
					<text>价格 : ¥{{food.price}}</text>
				</view>
				<view class="pronumber">
					<text>数量 : {{number}}</text>
				</view>
			</view>
		</view>
		<!--合计-->
		<view class="total">
			<view class="totalleft">
				<text>商品金额</text>
			</view>
			<view class="totalright">
				<text>¥ {{food.price*number}}</text>
				</view>
		</view>
		
		<!--确认下单-->
		<view class="payorder">
			<text>确认付款</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodId:null,
				number:0,
				food:{
					foodName:null,
				},
				img:null,
				//用户地址
				userAddress:{
					name:null,
					tel:null,
					address:null
				},
				//用户信息
				user:{
					
				}
			}
		},
		onLoad(option) {
			//获取用户信息
			const value=uni.getStorageSync("user");
			this.user=value;
			console.log(option)
			this.foodId=option.foodId;
			this.number=option.number;
			
			uni.request({
				url:this.webUrl+'selectFoodByFoodId',
				data:{
					'foodId':option.foodId,
				},
				success:(res)=>{
					this.food=res.data.obj;
					this.img=this.food.img[0].url;
				},
				fail:(err)=>(
					uni.showToast({
						title:'获取数据失败'
					})
				)
			})
			uni.request({
				url:this.webUrl+"selectUserMorenAddress",
				data:{
					'userId':this.user.userId
				},
				success: (res) => {
					this.userAddress=res.data.obj;
				}
			})
		},
		methods: {
			//跳转地址管理
			chooseAddress(){
				uni.navigateTo({
					url:"/pages/food/chooseAddress/chooseAddress?userId="+this.user.userId
				})
			}
		},
		//获取更改地址后的信息,
		//key对应的value此时是存入的选择的地址所有信息
		onShow() {
			uni.getStorage({
				key:"xuanzeid",
				success: (res) => {
					if(res.data!=null){
						setTimeout(function(){
							uni.showToast({
								title:"收货地址已更改"
							})
						},300)
					}
					this.userAddress=res.data;
				}
			})
			//销毁此key的缓存
			uni.removeStorage({
				key:"xuanzeid"
			})
			
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.product{
		float: left;
		width: 100%;
		height: 220rpx;
		background-color: white;
		.left{
			float: left;
			width: 220rpx;
			height: 220rpx;
			text-align: center;
			line-height: 220rpx;
			view{
				float:left;
				margin-top: 16rpx;
				margin-left: 16rpx;
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid rgb(220,220,220);
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.right{
			float: left;
			width: 530rpx;
			height: 220rpx;
			.proname{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					color: rgb(148,102,102);
					font-size: 28rpx;
				}
			}
			.proprice{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					font-size:30rpx;
					color: rgb(148,102,102);
				}
			}
			.pronumber{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					font-size: 30rpx;
					color: rgb(148,102,102);
				}
			}
		}
	}
	.total{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		float: left;
		margin-top: 10rpx;
		width: 100%;
		height: 100rpx;
		background-color: white;
		.totalleft{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			color: rgb(148,102,102);
		}
		.totalright{
			height: 100rpx;
			line-height: 100rpx;
			margin-right: 30rpx;
			font-size: 30rpx;
			color: rgb(148,102,102);
		}
	}
	.payorder{
		float: left;
		width: 370rpx;
		height: 70rpx;
		background-color:rgb(148,102,102) ;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-top: 280rpx;
		margin-left: 190rpx;
		text-align: center;
		color: white;
	}
	.address{
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;
		margin-bottom: 5rpx;
		.address1{
			width:30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: rgb(148,102,102);
			text{
				margin-left:25rpx ;
			}
		}
		.address2{
			width:40%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			color: rgb(148,102,102);
		}
		.address3{
			width:30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text{
				margin-left:160rpx ;
				color: rgb(148,102,102);
			}
		}
	}
	
	.addressDetail{
		width: 100%;
		height: 180rpx;
		float: left;
		background-color: white;
		margin-bottom: 10rpx;
		.name{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
		}
		.tel{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
		}
		.address{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
			overflow: hidden;
		}
	}
</style>
